<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-form ref="form" :model="queryInfo" label-width="110px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="支付状态：">
              <el-select style="width: 100%" v-model="queryInfo.pay_status" placeholder="请选择支付状态">
                <el-option
                  v-for="item in pay_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="是否发货：">
              <el-select style="width: 100%" v-model="queryInfo.is_send" placeholder="请选择是否发货">
                <el-option
                  v-for="item in is_send"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="会员Id：">
              <el-input v-model="queryInfo.user_id" placeholder="请输入会员Id"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="发票抬头：">
              <el-select style="width: 100%" v-model="queryInfo.order_fapiao_title" placeholder="请选择发票抬头">
                <el-option
                  v-for="item in order_fapiao_title"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="公司名称：">
              <el-input v-model="queryInfo.order_fapiao_company" placeholder="请输入公司名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="float: right; margin-bottom: 10px">
          <el-button type="primary" size="small" @click="getOrderList">查 询</el-button>
          <el-button type="warning" size="small" @click="resetQueryInfo">重 置</el-button>
        </el-row>
      </el-form>

      <el-table :data="orderList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="会员Id" prop="user_id" align="center" width="90px"></el-table-column>
        <el-table-column label="订单Id" prop="order_id" align="center" width="90px"></el-table-column>
        <el-table-column label="订单编号" prop="order_number" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="订单价格" prop="order_price" align="center" width="90px"></el-table-column>
        <el-table-column label="支付状态" prop="pay_status" align="center" width="90px">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
            <el-tag type="danger" v-else>未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="支付方式" prop="order_pay" align="center" width="90px">
          <template slot-scope="scope">
            <el-tag type="warning" v-if="Number(scope.row.pay_status) === 0">未支付</el-tag>
            <el-tag v-else-if="Number(scope.row.pay_status) === 1">支付宝</el-tag>
            <el-tag type="success" v-else-if="Number(scope.row.pay_status) === 2">微信</el-tag>
            <el-tag type="info" v-else-if="Number(scope.row.pay_status) === 3">银行</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send" align="center" width="90px"></el-table-column>
        <el-table-column label="发票抬头" prop="order_fapiao_title" align="center" width="90px"></el-table-column>
        <el-table-column
          label="公司名称"
          prop="order_fapiao_company"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="发票内容"
          prop="order_fapiao_content"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="收货地址" prop="consignee_addr" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="下单时间" prop="create_time" align="center">
          <template slot-scope="scope">
            {{ scope.row.create_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" prop="update_time" align="center">
          <template slot-scope="scope">
            {{ scope.row.update_time | dateFormat }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="160px" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="showOrderDetail(scope.row.order_id)">详 情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <el-dialog title="订单详情" :visible.sync="showOrderDetailDialog">
      <el-row>
        <el-col :span="3">会员Id：</el-col>
        <el-col :span="8">{{ detailList.user_id }}</el-col>

        <el-col :span="3"> 订单Id：</el-col>
        <el-col :span="8">{{ detailList.order_id }}</el-col>
      </el-row>

      <el-row>
        <el-col :span="3">订单编号：</el-col>
        <el-col :span="8">{{ detailList.order_number }}</el-col>
      </el-row>

      <el-divider content-position="center">商品信息</el-divider>

      <el-row v-for="(item, idx) in detailList.goods" :key="idx">
        <p>商品信息 {{ idx }}</p>
        <el-col :span="3">id：</el-col>
        <el-col :span="8">{{ item.id }}</el-col>

        <el-col :span="3">订单Id：</el-col>
        <el-col :span="8">{{ item.order_id }}</el-col>

        <el-col :span="3">商品Id：</el-col>
        <el-col :span="8">{{ item.goods_id }}</el-col>

        <el-col :span="3">商品价格：</el-col>
        <el-col :span="8">{{ item.goods_price }}</el-col>

        <el-col :span="3">商品数量：</el-col>
        <el-col :span="8">{{ item.goods_number }}</el-col>

        <el-col :span="3">商品总价：</el-col>
        <el-col :span="8">{{ item.goods_total_price }}</el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showOrderDetailDialog = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--   <!~~ 物流相关接口失效，页面相关内容已取消 ~~>
    <!~~ 修改地址对话框 ~~>
    <el-dialog @close="addressDialogClosed" title="修改地址" :visible.sync="addressVisible" width="50%">
      <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
        <el-form-item label="省市区/县" prop="address1">
          <el-cascader :options="cityData" v-model="addressForm.address1"></el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="address2">
          <el-input v-model="addressForm.address2"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addressVisible = false">取 消</el-button>
        <el-button type="primary" @click="addressVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!~~ 展示物流对话框 ~~>
    <el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
      <!~~ 时间线 ~~>
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time">
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>-->
  </div>
</template>

<script>
import cityData from './citydata'
import { getOrdersList, getOrderDetail } from '../../api/orders'

export default {
  name: 'order-list',
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5,
        user_id: '', // 用户 ID
        pay_status: '', // 支付状态
        is_send: '', //是否发货
        order_fapiao_title: '', // 发票抬头
        order_fapiao_company: '' // 公司名称
      },
      pay_status: [
        { value: '0', label: '未付款' },
        { value: '1', label: '已付款' }
      ],
      order_pay_show: false,
      order_pay: [
        { value: '0', label: '未支付' },
        { value: '1', label: '支付宝' },
        { value: '2', label: '微信' },
        { value: '3', label: '银行' }
      ],
      is_send: [
        { value: 1, label: '是' },
        { value: 0, label: '否' }
      ],
      order_fapiao_title: [
        { value: 0, label: '公司' },
        { value: 1, label: '个人' }
      ],
      total: 0,
      orderList: [],
      showOrderDetailDialog: false,
      detailList: {},
      addressVisible: false,
      addressForm: {
        address1: '',
        address2: ''
      },
      addressFormRules: {
        address1: [{ required: true, message: '请选择省市区/县', trigger: 'blur' }],
        address2: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
      },
      cityData: cityData,
      progressVisible: false,
      progressInfo: []
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    async getOrderList() {
      const res = await getOrdersList(this.queryInfo)
      if (res.meta.status === 200) {
        this.total = res.data.total
        this.orderList = res.data.goods
      } else {
        this.$message.error('获取订单列表失败')
      }
    },

    // 重置查询条件
    async resetQueryInfo() {
      this.queryInfo = {
        query: '',
        pagenum: 1,
        pagesize: 5,
        user_id: '',
        pay_status: '',
        is_send: '',
        order_fapiao_title: '',
        order_fapiao_company: ''
      }
      const res = await getOrdersList(this.queryInfo)
      if (res.meta.status === 200) {
        this.total = res.data.total
        this.orderList = res.data.goods
      } else {
        this.$message.error('获取用户列表失败!')
      }
    },

    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrderList()
    },

    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getOrderList()
    },

    // 展示详情弹窗
    async showOrderDetail(id) {
      const res = await getOrderDetail(id)
      if (res.meta.status === 200) {
        this.detailList = res.data
        this.showOrderDetailDialog = true
      }
    }

    /*// 物流相关接口失效，页面相关功能已取消
    // 展示修改地址的对话框
    showBox() {
      this.addressVisible = true
    },

    addressDialogClosed() {
      this.$refs.addressFormRef.resetFields()
    },

    async showProgressBox() {
      const { data: res } = await this.$http.get('/kuaidi/1106975712662')
      if (res.meta.status !== 200) {
        return this.$message.error('获取物流信息失败')
      }

      this.progressInfo = res.data
      this.progressVisible = true
      console.log(this.progressInfo)
    }*/
  }
}
</script>

<style scoped>
@import '../../plugins/timeline/timeline.css';
@import '../../plugins/timeline-item/timeline-item.css';

.el-cascader {
  width: 100%;
}
</style>
